<script setup lang="ts">
import { requiredCheck, singleIpCheck, validatePortCheck } from "@/utils/verify";
import { plugAction, warnAction, warnAdd, plugOneKey, ifaceSentryVlanList, ifaceTab } from "@/api/modules/threat/index";
import { ref } from "vue";

interface Props {
  title?: string;
  rowData?: Object;
  type?: number;
}

const props = withDefaults(defineProps<Props>(), {
  title: "封堵",
  rowData: undefined,
  type: 1 // 1=封堵 2=删除 3=人工封堵
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import SelectLinksInput from "@/components/SelectLinksInput/index.vue";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    sip: [...requiredCheck("请输入IP"), { validator: singleIpCheck }],
    eth: [...requiredCheck("请选择网口")]
  },
  defaultData: {
    plug_class: "1"
  }
});

const ifaces = ref([]);

async function getIface() {
  try {
    const res = await ifaceTab();
    console.log(res);
    if (res) {
      ifaces.value = res.data;
      console.log(ifaces.value);
      console.log(`ifaces::`, ifaces.value);
    }
    Object.values(res);
  } catch (error) {}
}

async function submitCb() {
  await updateFormRef.value.validate();
  const sip = updateFormData.sip;
  if (props.type == 1) {
    await submit({
      addApi: warnAction,
      updateApi: warnAction,
      sendData: {
        sip: updateFormData.sip,
        action: props.type == 2 ? 4 : 1,
        desc: props.type == 3 ? "人工封堵" : "",
        plug_class: updateFormData.plug_class
      }
    });
  }

  if (props.type == 2) {
    if (props.rowData?.isBlock) {
      await plugAction({
        sip: updateFormData.sip,
        action: 1,
        desc: ""
      });
    }

    await submit({
      addApi: warnAction,
      updateApi: warnAction,
      sendData: {
        sip: updateFormData.sip,
        action: props.type == 2 ? 4 : 1,
        desc: props.type == 3 ? "人工封堵" : "",
        plug_class: updateFormData.plug_class
      }
    });
  }
  if (props.type == 3) {
    await plugOneKey({
      onekey: JSON.stringify({ desc: "", iplist: sip, plug_class: "1", ifid: updateFormData.eth, vlanid: 0 })
    });
  }
  showHandle.value = false;
  emits("success");
}

function openHandleCb() {
  openHandle({
    row: {
      ...props.rowData
    },
    id: props.rowData?.id
  });
  if (props.rowData?.sip) {
    updateFormData.sip = props.rowData?.sip;
  }
  getIface();
}

async function ethChange() {
  // const res = await ifaceSentryVlanList({ id: updateFormData.eth });
  // console.log(res);
}
</script>

<template>
  <div class="update-form mg-r-sm" style="display: inline-block" @click="openHandleCb">
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="450px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="IP" prop="sip">
            <el-input
              :disabled="props.rowData?.sip"
              style="width: 220px"
              v-model="updateFormData.sip"
              auto-complete="off"
              placeholder="请输入IP"
            />
          </el-form-item>
          <el-form-item label="网口" prop="eth" v-if="props.type == 3">
            <el-select
              @change="ethChange"
              :disabled="props.rowData?.eth"
              style="width: 220px"
              v-model="updateFormData.eth"
              auto-complete="off"
              placeholder="请选择网口"
            >
              <el-option v-for="item in ifaces" :label="item.ifname" :value="item.ifid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="type == 1 || type == 3" label="模式" prop="plug_class">
            <el-select style="width: 220px" v-model="updateFormData.plug_class" auto-complete="off">
              <el-option value="1" label="串联封堵"></el-option>
              <!--              <el-option value="2" label="交换机封堵"></el-option>-->
              <!--              <el-option value="3" label="第三方封堵"></el-option>-->
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
